<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绿色蔬菜 - 新鲜食材展示</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2E7D32', // 深绿色
                        secondary: '#81C784', // 浅绿色
                        accent: '#FF9800', // 橙色
                        neutral: '#F5F5F5', // 浅灰色
                        dark: '#1B5E20', // 暗绿色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="bg-neutral min-h-screen">
<!-- 导航栏 -->
<header class="sticky top-0 z-50 bg-white shadow-md">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <i class="fa fa-leaf text-primary text-2xl"></i>
            <h1 class="text-xl md:text-2xl font-bold text-primary">绿色蔬菜</h1>
        </div>

        <!-- 桌面端导航 -->
        <nav class="hidden md:flex items-center space-x-8">
            <a href="#" class="font-medium text-primary hover:text-dark transition-colors">首页</a>
            <a href="#" class="font-medium text-gray-600 hover:text-primary transition-colors">分类</a>
            <a href="#" class="font-medium text-gray-600 hover:text-primary transition-colors">特惠</a>
            <a href="#" class="font-medium text-gray-600 hover:text-primary transition-colors">关于我们</a>
        </nav>

        <!-- 搜索框 -->
        <div class="hidden md:flex items-center border border-gray-300 rounded-full px-3 py-1.5 w-64">
            <i class="fa fa-search text-gray-400 mr-2"></i>
            <input type="text" placeholder="搜索蔬菜..." class="w-full outline-none text-sm">
        </div>

        <!-- 购物车和用户图标 -->
        <div class="flex items-center space-x-4">
            <div class="relative">
                <button class="text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-shopping-cart text-xl"></i>
                    <span class="absolute -top-2 -right-2 bg-accent text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
                </button>
            </div>
            <button class="text-gray-600 hover:text-primary transition-colors">
                <i class="fa fa-user-circle text-xl"></i>
            </button>
            <!-- 移动端菜单按钮 -->
            <button class="md:hidden text-gray-600 hover:text-primary transition-colors" id="mobile-menu-button">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </div>

    <!-- 移动端导航菜单 -->
    <div class="md:hidden hidden bg-white absolute w-full border-t" id="mobile-menu">
        <div class="container mx-auto px-4 py-3 space-y-3">
            <a href="#" class="block font-medium text-primary py-2">首页</a>
            <a href="#" class="block font-medium text-gray-600 py-2">分类</a>
            <a href="#" class="block font-medium text-gray-600 py-2">特惠</a>
            <a href="#" class="block font-medium text-gray-600 py-2">关于我们</a>
            <div class="border border-gray-300 rounded-full px-3 py-1.5 flex items-center">
                <i class="fa fa-search text-gray-400 mr-2"></i>
                <input type="text" placeholder="搜索蔬菜..." class="w-full outline-none text-sm">
            </div>
        </div>
    </div>
</header>

<!-- 主横幅 -->
<section class="relative h-64 md:h-80 overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-r from-primary/90 to-dark/90"></div>
    <img src="../static/images/292-1200x400.jpg" alt="新鲜蔬菜背景图" class="absolute inset-0 w-full h-full object-cover mix-blend-overlay">
    <div class="container mx-auto px-4 relative h-full flex flex-col justify-center">
        <h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-bold text-white mb-2">新鲜蔬菜，健康生活</h2>
        <p class="text-white/90 text-lg md:text-xl max-w-2xl mb-6">精选当季新鲜蔬菜，从农场直达您的餐桌</p>
        <button class="bg-accent hover:bg-accent/90 text-white font-medium py-2 px-6 rounded-full inline-flex items-center transition-colors w-max">
            <span>立即选购</span>
            <i class="fa fa-arrow-right ml-2"></i>
        </button>
    </div>
</section>

<!-- 分类导航 -->
<section class="bg-white py-4">
    <div class="container mx-auto px-4">
        <div class="flex overflow-x-auto pb-2 space-x-4">
            <button class="bg-primary text-white px-4 py-2 rounded-full whitespace-nowrap">全部蔬菜</button>
            <button class="bg-neutral hover:bg-gray-200 px-4 py-2 rounded-full whitespace-nowrap transition-colors">叶菜类</button>
            <button class="bg-neutral hover:bg-gray-200 px-4 py-2 rounded-full whitespace-nowrap transition-colors">根茎类</button>
            <button class="bg-neutral hover:bg-gray-200 px-4 py-2 rounded-full whitespace-nowrap transition-colors">茄果类</button>
            <button class="bg-neutral hover:bg-gray-200 px-4 py-2 rounded-full whitespace-nowrap transition-colors">豆类</button>
            <button class="bg-neutral hover:bg-gray-200 px-4 py-2 rounded-full whitespace-nowrap transition-colors">食用菌</button>
            <button class="bg-neutral hover:bg-gray-200 px-4 py-2 rounded-full whitespace-nowrap transition-colors">葱姜蒜类</button>
        </div>
    </div>
</section>

<!-- 蔬菜列表 -->
<section class="py-8">
    <div class="container mx-auto px-4">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl md:text-2xl font-bold text-gray-800">新鲜蔬菜</h2>
            <div class="flex items-center space-x-2">
                <span class="text-gray-600">排序:</span>
                <select class="bg-white border border-gray-300 rounded-md px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
                    <option>推荐</option>
                    <option>价格: 从低到高</option>
                    <option>价格: 从高到低</option>
                    <option>最新上架</option>
                    <option>销量优先</option>
                </select>
            </div>
        </div>

        <!-- 蔬菜网格 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            <!-- 蔬菜卡片1 -->
            <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover">
                <div class="relative h-48 overflow-hidden">
                    <span class="absolute top-3 left-3 bg-accent text-white text-xs font-medium px-2 py-1 rounded">热卖</span>
                    <img src="../static/images/292-400x300.jpg" alt="新鲜菠菜" class="w-full h-full object-cover">
                </div>
                <div class="p-4">
                    <h3 class="font-bold text-gray-800 text-lg mb-1">新鲜菠菜</h3>
                    <div class="flex items-center text-sm text-gray-500 mb-2">
              <span class="mr-2">
                <i class="fa fa-check-circle text-primary mr-1"></i>有机认证
              </span>
                        <span>
                <i class="fa fa-star text-yellow-400 mr-1"></i>4.8 (120)
              </span>
                    </div>
                    <div class="flex justify-between items-center mt-3">
                        <div>
                            <span class="text-primary font-bold text-xl">¥3.99</span>
                            <span class="text-gray-400 line-through text-sm ml-1">¥5.99</span>
                        </div>
                        <div class="text-gray-600 text-sm">
                            <i class="fa fa-shopping-basket mr-1"></i>已售 238
                        </div>
                    </div>
                    <div class="flex justify-between items-center mt-3">
                        <div class="flex items-center text-sm">
                            <span class="text-gray-600 mr-1">库存:</span>
                            <span class="text-green-600 font-medium">充足</span>
                        </div>
                        <button class="bg-primary hover:bg-dark text-white p-2 rounded-full transition-colors">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 蔬菜卡片2 -->
            <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover">
                <div class="relative h-48 overflow-hidden">
                    <span class="absolute top-3 left-3 bg-green-500 text-white text-xs font-medium px-2 py-1 rounded">有机</span>
                    <img src="../static/images/1080-400x300.jpg" alt="胡萝卜" class="w-full h-full object-cover">
                </div>
                <div class="p-4">
                    <h3 class="font-bold text-gray-800 text-lg mb-1">胡萝卜</h3>
                    <div class="flex items-center text-sm text-gray-500 mb-2">
              <span class="mr-2">
                <i class="fa fa-check-circle text-primary mr-1"></i>有机认证
              </span>
                        <span>
                <i class="fa fa-star text-yellow-400 mr-1"></i>4.6 (95)
              </span>
                    </div>
                    <div class="flex justify-between items-center mt-3">
                        <div>
                            <span class="text-primary font-bold text-xl">¥2.99</span>
                            <span class="text-gray-400 line-through text-sm ml-1">¥3.99</span>
                        </div>
                        <div class="text-gray-600 text-sm">
                            <i class="fa fa-shopping-basket mr-1"></i>已售 187
                        </div>
                    </div>
                    <div class="flex justify-between items-center mt-3">
                        <div class="flex items-center text-sm">
                            <span class="text-gray-600 mr-1">库存:</span>
                            <span class="text-green-600 font-medium">充足</span>
                        </div>
                        <button class="bg-primary hover:bg-dark text-white p-2 rounded-full transition-colors">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 蔬菜卡片3 -->
            <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover">
                <div class="relative h-48 overflow-hidden">
                    <span class="absolute top-3 left-3 bg-blue-500 text-white text-xs font-medium px-2 py-1 rounded">新品</span>
                    <img src="../static/images/287-400x300.jpg" alt="西兰花" class="w-full h-full object-cover">
                </div>
                <div class="p-4">
                    <h3 class="font-bold text-gray-800 text-lg mb-1">西兰花</h3>
                    <div class="flex items-center text-sm text-gray-500 mb-2">
              <span class="mr-2">
                <i class="fa fa-check-circle text-primary mr-1"></i>有机认证
              </span>
                        <span>
                <i class="fa fa-star text-yellow-400 mr-1"></i>4.7 (78)
              </span>
                    </div>
                    <div class="flex justify-between items-center mt-3">
                        <div>
                            <span class="text-primary font-bold text-xl">¥4.59</span>
                        </div>
                        <div class="text-gray-600 text-sm">
                            <i class="fa fa-shopping-basket mr-1"></i>已售 93
                        </div>
                    </div>
                    <div class="flex justify-between items-center mt-3">
                        <div class="flex items-center text-sm">
                            <span class="text-gray-600 mr-1">库存:</span>
                            <span class="text-orange-500 font-medium">少量</span>
                        </div>
                        <button class="bg-primary hover:bg-dark text-white p-2 rounded-full transition-colors">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 蔬菜卡片4 -->
            <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover">
                <div class="relative h-48 overflow-hidden">
                    <img src="../static/images/1080-400x300.jpg" alt="西红柿" class="w-full h-full object-cover">
                </div>
                <div class="p-4">
                    <h3 class="font-bold text-gray-800 text-lg mb-1">西红柿</h3>
                    <div class="flex items-center text-sm text-gray-500 mb-2">
              <span class="mr-2">
                <i class="fa fa-check-circle text-primary mr-1"></i>有机认证
              </span>
                        <span>
                <i class="fa fa-star text-yellow-400 mr-1"></i>4.9 (156)
              </span>
                    </div>
                    <div class="flex justify-between items-center mt-3">
                        <div>
                            <span class="text-primary font-bold text-xl">¥3.29</span>
                            <span class="text-gray-400 line-through text-sm ml-1">¥4.29</span>
                        </div>
                        <div class="text-gray-600 text-sm">
                            <i class="fa fa-shopping-basket mr-1"></i>已售 312
                        </div>
                    </div>
                    <div class="flex justify-between items-center mt-3">
                        <div class="flex items-center text-sm">
                            <span class="text-gray-600 mr-1">库存:</span>
                            <span class="text-green-600 font-medium">充足</span>
                        </div>
                        <button class="bg-primary hover:bg-dark text-white p-2 rounded-full transition-colors">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 蔬菜卡片5 -->
            <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover">
                <div class="relative h-48 overflow-hidden">
                    <span class="absolute top-3 left-3 bg-accent text-white text-xs font-medium px-2 py-1 rounded">热卖</span>
                    <img src="../static/images/287-400x300.jpg" alt="青椒" class="w-full h-full object-cover">
                </div>
                <div class="p-4">
                    <h3 class="font-bold text-gray-800 text-lg mb-1">青椒</h3>
                    <div class="flex items-center text-sm text-gray-500 mb-2">
              <span class="mr-2">
                <i class="fa fa-check-circle text-primary mr-1"></i>有机认证
              </span>
                        <span>
                <i class="fa fa-star text-yellow-400 mr-1"></i>4.5 (64)
              </span>
                    </div>
                    <div class="flex justify-between items-center mt-3">
                        <div>
                            <span class="text-primary font-bold text-xl">¥2.79</span>
                        </div>
                        <div class="text-gray-600 text-sm">
                            <i class="fa fa-shopping-basket mr-1"></i>已售 78
                        </div>
                    </div>
                    <div class="flex justify-between items-center mt-3">
                        <div class="flex items-center text-sm">
                            <span class="text-gray-600 mr-1">库存:</span>
                            <span class="text-green-600 font-medium">充足</span>
                        </div>
                        <button class="bg-primary hover:bg-dark text-white p-2 rounded-full transition-colors">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 蔬菜卡片6 -->
            <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover">
                <div class="relative h-48 overflow-hidden">
                    <img src="../static/images/292-400x300.jpg" alt="生菜" class="w-full h-full object-cover">
                </div>
                <div class="p-4">
                    <h3 class="font-bold text-gray-800 text-lg mb-1">生菜</h3>
                    <div class="flex items-center text-sm text-gray-500 mb-2">
              <span class="mr-2">
                <i class="fa fa-check-circle text-primary mr-1"></i>有机认证
              </span>
                        <span>
                <i class="fa fa-star text-yellow-400 mr-1"></i>4.7 (102)
              </span>
                    </div>
                    <div class="flex justify-between items-center mt-3">
                        <div>
                            <span class="text-primary font-bold text-xl">¥3.49</span>
                            <span class="text-gray-400 line-through text-sm ml-1">¥4.49</span>
                        </div>
                        <div class="text-gray-600 text-sm">
                            <i class="fa fa-shopping-basket mr-1"></i>已售 143
                        </div>
                    </div>
                    <div class="flex justify-between items-center mt-3">
                        <div class="flex items-center text-sm">
                            <span class="text-gray-600 mr-1">库存:</span>
                            <span class="text-red-500 font-medium">即将售罄</span>
                        </div>
                        <button class="bg-primary hover:bg-dark text-white p-2 rounded-full transition-colors">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 蔬菜卡片7 -->
            <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover">
                <div class="relative h-48 overflow-hidden">
                    <span class="absolute top-3 left-3 bg-blue-500 text-white text-xs font-medium px-2 py-1 rounded">新品</span>
                    <img src="../static/images/1080-400x300.jpg" alt="秋葵" class="w-full h-full object-cover">
                </div>
                <div class="p-4">
                    <h3 class="font-bold text-gray-800 text-lg mb-1">秋葵</h3>
                    <div class="flex items-center text-sm text-gray-500 mb-2">
              <span class="mr-2">
                <i class="fa fa-check-circle text-primary mr-1"></i>有机认证
              </span>
                        <span>
                <i class="fa fa-star text-yellow-400 mr-1"></i>4.6 (42)
              </span>
                    </div>
                    <div class="flex justify-between items-center mt-3">
                        <div>
                            <span class="text-primary font-bold text-xl">¥5.99</span>
                        </div>
                        <div class="text-gray-600 text-sm">
                            <i class="fa fa-shopping-basket mr-1"></i>已售 37
                        </div>
                    </div>
                    <div class="flex justify-between items-center mt-3">
                        <div class="flex items-center text-sm">
                            <span class="text-gray-600 mr-1">库存:</span>
                            <span class="text-green-600 font-medium">充足</span>
                        </div>
                        <button class="bg-primary hover:bg-dark text-white p-2 rounded-full transition-colors">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 蔬菜卡片8 -->
            <div class="bg-white rounded-xl overflow-hidden card-shadow card-hover">
                <div class="relative h-48 overflow-hidden">
                    <span class="absolute top-3 left-3 bg-accent text-white text-xs font-medium px-2 py-1 rounded">热卖</span>
                    <img src="../static/images/287-400x300.jpg" alt="土豆" class="w-full h-full object-cover">
                </div>
                <div class="p-4">
                    <h3 class="font-bold text-gray-800 text-lg mb-1">土豆</h3>
                    <div class="flex items-center text-sm text-gray-500 mb-2">
              <span class="mr-2">
                <i class="fa fa-check-circle text-primary mr-1"></i>有机认证
              </span>
                        <span>
                <i class="fa fa-star text-yellow-400 mr-1"></i>4.9 (215)
              </span>
                    </div>
                    <div class="flex justify-between items-center mt-3">
                        <div>
                            <span class="text-primary font-bold text-xl">¥2.29</span>
                            <span class="text-gray-400 line-through text-sm ml-1">¥3.29</span>
                        </div>
                        <div class="text-gray-600 text-sm">
                            <i class="fa fa-shopping-basket mr-1"></i>已售 421
                        </div>
                    </div>
                    <div class="flex justify-between items-center mt-3">
                        <div class="flex items-center text-sm">
                            <span class="text-gray-600 mr-1">库存:</span>
                            <span class="text-green-600 font-medium">充足</span>
                        </div>
                        <button class="bg-primary hover:bg-dark text-white p-2 rounded-full transition-colors">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 加载更多按钮 -->
        <div class="flex justify-center mt-10">
            <button class="border-2 border-primary text-primary hover:bg-primary hover:text-white font-medium py-2 px-6 rounded-full transition-colors">
                加载更多 <i class="fa fa-angle-down ml-1"></i>
            </button>
        </div>
    </div>
</section>

<!-- 促销横幅 -->
<section class="py-10 bg-gradient-to-r from-primary to-dark text-white">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row items-center justify-between">
            <div class="mb-6 md:mb-0">
                <h2 class="text-2xl md:text-3xl font-bold mb-2">限时特惠</h2>
                <p class="text-white/90 mb-4">满50元减10元，满100元减25元，新鲜蔬菜直达您家</p>
                <div class="flex space-x-4">
                    <div class="bg-white/20 backdrop-blur-sm rounded-lg p-3 text-center w-16">
                        <div class="text-xl font-bold" id="countdown-hours">12</div>
                        <div class="text-xs text-white/80">小时</div>
                    </div>
                    <div class="bg-white/20 backdrop-blur-sm rounded-lg p-3 text-center w-16">
                        <div class="text-xl font-bold" id="countdown-minutes">45</div>
                        <div class="text-xs text-white/80">分钟</div>
                    </div>
                    <div class="bg-white/20 backdrop-blur-sm rounded-lg p-3 text-center w-16">
                        <div class="text-xl font-bold" id="countdown-seconds">33</div>
                        <div class="text-xs text-white/80">秒</div>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-auto">
                <button class="bg-white text-primary hover:bg-white/90 font-bold py-3 px-8 rounded-full transition-colors">
                    立即抢购
                </button>
            </div>
        </div>
    </div>
</section>

<!-- 页脚 -->
<footer class="bg-gray-800 text-white pt-12 pb-6">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <div class="flex items-center space-x-2 mb-4">
                    <i class="fa fa-leaf text-secondary text-2xl"></i>
                    <h3 class="text-xl font-bold">绿色蔬菜</h3>
                </div>
                <p class="text-gray-400 mb-4">我们致力于提供最新鲜、最健康的有机蔬菜，从农场直达您的餐桌。</p>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-secondary transition-colors">
                        <i class="fa fa-facebook"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-secondary transition-colors">
                        <i class="fa fa-twitter"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-secondary transition-colors">
                        <i class="fa fa-instagram"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-secondary transition-colors">
                        <i class="fa fa-youtube"></i>
                    </a>
                </div>
            </div>

            <div>
                <h4 class="text-lg font-bold mb-4">快速链接</h4>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">首页</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">全部产品</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">特惠活动</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">关于我们</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">联系我们</a></li>
                </ul>
            </div>

            <div>
                <h4 class="text-lg font-bold mb-4">客户服务</h4>
                <ul class="space-y-2">
                    <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">配送信息</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">退换政策</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">常见问题</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">隐私政策</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-secondary transition-colors">使用条款</a></li>
                </ul>
            </div>

            <div>
                <h4 class="text-lg font-bold mb-4">联系我们</h4>
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <i class="fa fa-map-marker text-secondary mt-1 mr-3"></i>
                        <span class="text-gray-400">北京市朝阳区农业科技园A区15号</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fa fa-phone text-secondary mr-3"></i>
                        <span class="text-gray-400">400-123-4567</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fa fa-envelope text-secondary mr-3"></i>
                        <span class="text-gray-400">contact@greenvegetables.com</span>
                    </li>
                </ul>
                <div class="mt-4">
                    <h5 class="font-medium mb-2">订阅我们的通讯</h5>
                    <div class="flex">
                        <input type="email" placeholder="您的邮箱地址" class="bg-gray-700 text-white px-3 py-2 rounded-l-lg w-full focus:outline-none focus:ring-1 focus:ring-secondary">
                        <button class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-r-lg transition-colors">
                            <i class="fa fa-paper-plane"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-500 text-sm">
            <p>© 2025 绿色蔬菜. 保留所有权利.</p>
        </div>
    </div>
</footer>

<!-- JavaScript -->
<script>
    // 移动端菜单切换
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    mobileMenuButton.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
    });

    // 模拟倒计时功能
    function updateCountdown() {
        const hoursElement = document.getElementById('countdown-hours');
        const minutesElement = document.getElementById('countdown-minutes');
        const secondsElement = document.getElementById('countdown-seconds');

        let hours = parseInt(hoursElement.textContent);
        let minutes = parseInt(minutesElement.textContent);
        let seconds = parseInt(secondsElement.textContent);

        seconds--;

        if (seconds < 0) {
            seconds = 59;
            minutes--;

            if (minutes < 0) {
                minutes = 59;
                hours--;

                if (hours < 0) {
                    hours = 23;
                }
            }
        }

        hoursElement.textContent = hours.toString().padStart(2, '0');
        minutesElement.textContent = minutes.toString().padStart(2, '0');
        secondsElement.textContent = seconds.toString().padStart(2, '0');
    }

    // 每秒更新倒计时
    setInterval(updateCountdown, 1000);

    // 添加到购物车动画
    const addToCartButtons = document.querySelectorAll('.bg-primary.hover\\:bg-dark');

    addToCartButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();

            // 创建一个小球动画
            const ball = document.createElement('div');
            ball.className = 'fixed w-6 h-6 bg-primary rounded-full z-50 transition-all duration-1000 ease-out';
            ball.style.left = `${e.clientX}px`;
            ball.style.top = `${e.clientY}px`;
            document.body.appendChild(ball);

            // 获取购物车图标的位置
            const cartIcon = document.querySelector('.fa-shopping-cart');
            const cartRect = cartIcon.getBoundingClientRect();

            // 动画到购物车
            setTimeout(() => {
                ball.style.transform = `translate(${cartRect.left - e.clientX}px, ${cartRect.top - e.clientY}px) scale(0.2)`;
                ball.style.opacity = '0.5';
            }, 10);

            // 动画结束后移除元素
            setTimeout(() => {
                document.body.removeChild(ball);

                // 更新购物车数量
                const cartCount = document.querySelector('.fa-shopping-cart + span');
                const currentCount = parseInt(cartCount.textContent);
                cartCount.textContent = (currentCount + 1).toString();

                // 显示添加成功提示
                const notification = document.createElement('div');
                notification.className = 'fixed top-20 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg z-50 transition-all duration-300 opacity-0';
                notification.textContent = '已添加到购物车';
                document.body.appendChild(notification);

                // 显示通知
                setTimeout(() => {
                    notification.style.opacity = '1';
                }, 10);

                // 隐藏通知
                setTimeout(() => {
                    notification.style.opacity = '0';
                    setTimeout(() => {
                        document.body.removeChild(notification);
                    }, 300);
                }, 2000);
            }, 1000);
        });
    });

    // 滚动时添加阴影效果
    window.addEventListener('scroll', () => {
        const header = document.querySelector('header');
        if (window.scrollY > 10) {
            header.classList.add('shadow-lg');
        } else {
            header.classList.remove('shadow-lg');
        }
    });
</script>
</body>
</html>

